<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>作业管理系统</title>

    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../css/iconfont.css">
    <script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>

    <!-- 滚动条插件 -->
    <link rel="stylesheet" type="text/css" href="../../css/jquery.mCustomScrollbar.css">
    <script src="../../framework/jquery-ui-1.10.4.min.js"></script>
    <script src="../../framework/jquery.mousewheel.min.js"></script>
    <script src="../../framework/jquery.mCustomScrollbar.min.js"></script>
    <script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->
    <script type="text/javascript" src="../../framework/frameAll.js"></script>
</head>

<body>
<div class="cBody">
    <div class="console">
        <!-- form搜索框or添加框 -->
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="name" required placeholder="请输入需要检索的信息"
                           autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn" lay-submit lay-filter="formDemo">检索</button>
                <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;float: right;">
                    <button id="addTea" class="layui-btn  layui-btn-warm" type="button">添加</button>
                </div>
            </div>
        </form>
        <!-- 表格 -->
        <table class="layui-table-cell layui-hide" id="demo" lay-filter="test"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="del">删除</a>
        </script>
        <!-- layUI 分页模块 -->
        <div id="pages"></div>
    </div>
</div>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table,
            form = layui.form,
            content = "";
        var tableIns = table.render({
            elem: '#demo',
            height: "full-200",
            method: "get",
            request: {
                pageName: 'pageNo',//页码的参数名称，默认：page
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            where: {
                action: "page",
            },
            url: '/TeacherServlet.do',//数据接口
            page: true,//开启分页
            limits:[5,10,15,20,25,30,35,40,45,50],
            cellMinWidth: 140,
            cols: [[ //表头
                {title: '序号', type: 'numbers'},
                {field: 'no', title: '教师号', sort: true},
                {field: 'name', title: '教师姓名'},
                {field: 'age', title: '年龄', sort: true},
                {field: 'sex', title: '性别', templet: '#sexTpl', sort: true},
                {title: '操作', align: 'center', toolbar: '#barDemo', fixed: 'right'}
            ]]
        });
        //查询
        form.on('submit(formDemo)', function (data) {
            content = data.field.name;
            tableIns.reload({
                where: {content: content},
                page: {curr: 1}
            });
            return false;
        });
        //添加
        $("#addTea").click(function () {
            layer.open({
                type: 2,
                title: '添加教师',
                area: ['350px', '66%'],
                resize: false,
                offset: '50px',
                btn: ["提交", "取消"],
                btnAlign: 'c',
                scrollbar: false,
                content: "tagent_add.html",
                yes: function (index, layero) {
                    //父页面调用子页面的函数获取返回值
                    var info = $(layero).find("iframe")[0].contentWindow.getInfo();
                    info['action'] = 'add';
                    if (!/^[\S]{6,12}$/.test(info['no'])) {
                        noMsg("教师号格式错误！");
                    } else if (!/^[\u4e00-\u9fa5]{2,5}$/.test(info['name'])) {
                        noMsg("姓名格式错误！");
                    } else if (!/^(?:[1-9][0-9]?|1[01][0-9]|120)$/.test(info['age'])) {
                        noMsg("年龄在1-120岁之间！");
                    } else if (!(/^[\S]{6,12}$/.test(info['password']) || "" == info['password'])) {
                        noMsg("密码格式错误！");
                    } else {
                        if ("" == info['password']) {
                            info['password'] = info['no'];
                        }
                        //向后端发送更新信息的请求
                        $.ajax({
                            type: "post",
                            url: "/TeacherServlet.do",
                            data: info,
                            dataType: "text",
                            success: function (text) {
                                var tip = parseInt(text);
                                if (tip == 0) {
                                    yesMsg('添加成功！');
                                    layer.close(index);
                                    tableIns.reload({
                                        where: {content: content},
                                        page: {curr: $(".layui-laypage-skip .layui-input").val()}
                                    });
                                } else {
                                    noMsg('教师号重复！');
                                }
                            }
                        });
                    }
                }
            });
        });
        //按钮事件
        table.on('tool(test)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'del') { //删除
                layer.confirm('是否删除' + data.name, {
                    offset: '100px',
                    icon: 3
                }, function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        type: "get",
                        url: "/TeacherServlet.do",
                        data: {
                            action: "del",
                            id: data.id
                        },
                        dataType: "text",
                        success: function (text) {
                            var tip = parseInt(text);
                            if (tip == 0) {
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                yesMsg('删除成功!');
                            } else {
                                noMsg('删除失败!');
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                layer.open({
                    type: 2,
                    title: '编辑教师',
                    area: ['350px', '66%'],
                    resize: false,
                    offset: '50px',
                    btn: ["提交", "取消"],
                    btnAlign: 'c',
                    scrollbar: false,
                    content: "tagent_add.html",
                    success: function (layero, index) {
                        var iframe = window['layui-layer-iframe' + index];
                        iframe.load(data);
                    },
                    yes: function (index, layero) {
                        //父页面调用子页面的函数获取返回值
                        var info = $(layero).find("iframe")[0].contentWindow.getInfo();
                        info['action'] = 'update';
                        if (!/^[\S]{6,12}$/.test(info['no'])) {
                            noMsg("教师号格式错误！");
                        } else if (!/^[\u4e00-\u9fa5]{2,5}$/.test(info['name'])) {
                            noMsg("姓名格式错误！");
                        } else if (!/^(?:[1-9][0-9]?|1[01][0-9]|120)$/.test(info['age'])) {
                            noMsg("年龄在1-120岁之间！");
                        } else if (!(/^[\S]{6,12}$/.test(info['password'])|| "" == info['password'])) {
                            noMsg("密码格式错误！");
                        } else {
                            if ("" == info['password']) {
                                info['password'] = info['no'];
                            }
                            //向后端发送更新信息的请求
                            $.ajax({
                                type: "post",
                                url: "/TeacherServlet.do",
                                data: info,
                                dataType: "text",
                                success: function (text) {
                                    var tip = parseInt(text);
                                    if (tip == 0) {
                                        layer.close(index);
                                        yesMsg('修改成功！');
                                        obj.update({
                                            no: info['no'],
                                            name: info['name'],
                                            className: info['className'],
                                            age: info['age'],
                                            sex: info['sexName']
                                        });
                                    } else {
                                        noMsg('教师号重复！');
                                    }
                                }
                            });
                        }
                    }
                });
            }
        });
    });
</script>
<script type="text/html" id="sexTpl">
    {{#  if(d.sex === '女'){ }}
    <span style="color: #F581B1;">{{ d.sex }}</span>
    {{#  } else { }}
    <span style="color: #01AAED;">{{ d.sex }}</span>
    {{#  } }}
</script>
</body>
</html>
